<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<title></title>
		<style type="text/css">
			body{
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 500px;
			}
			#login{
				width: 450px;
				box-shadow: 0 0 5px 5px gray;
				padding: 10px;
				border-radius: 10px;
			}
			
			#login>img{
				width: 100%;
			}
			
			#login>h1{
				text-align: center;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div id="login">
			<img src="img/logo.png" />
			<h1>用户登录</h1>
		<form class="layui-form layui-form-pane">
		  <div class="layui-form-item">
		    <label class="layui-form-label">用户名</label>
		    <div class="layui-input-block">
		      <input type="text" name="userName" lay-verify="verifyUserName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-block">
		      <input type="password" name="userPwd" lay-verify="verifyUserPwd" autocomplete="off" placeholder="请输入密码" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">验证码</label>
		    <div class="layui-input-block">
		      <input type="text" name="virifyCode" lay-verify="verifyCode" autocomplete="off" placeholder="请输入验证码" class="layui-input layui-input-inline">
				<img id="virifyCodeImg" onclick="changeVerityCode()" src="http://127.0.0.1:8080/defaultKaptcha" />
			</div>
		  </div>

		  <div class="layui-form-item" style="text-align: center;">
		    <button class="layui-btn" lay-submit lay-filter="loginBtn">登陆</button>
		    <button class="layui-btn">取消</button>
		  </div>
		</form>
		</div>
		          
	</body>
	<script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//改变验证码
		function changeVerityCode(){
			//此处带上date参数可以消除浏览器缓存问题
			//obj.src = "http://127.0.0.1:8080/defaultKaptcha?date="+new Date();
			document.querySelector("#virifyCodeImg").src = "http://127.0.0.1:8080/defaultKaptcha?date="+new Date();
		};
		
		(function(){
			layui.form.on('submit(loginBtn)', function(data) {
					var userName = data.field.userName;
					var userPwd = data.field.userPwd;
					var virifyCode = data.field.virifyCode;
					layui.$.ajax({
						method:"post",
						url:"http://127.0.0.1:8080/user/login",
						xhrFields: {
							withCredentials: true //允许携带cookie
						},
						crossDomain: true,
						data:{
							"userName":userName,
							"userPwd":userPwd,
							"virifyCode":virifyCode
						},
						dataType: "json",
			
						success:function (result){
			                //此处存储到sessionStorage
			                window.sessionStorage.setItem("userInfo",JSON.stringify(result.data));
			                var userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
			                var userId = userInfo.userId;
							layui.layer.msg(result.msg);
							console.log(result);
							if(result.code == 200){
								window.location.href = "index.html";
							}
						}
					});
					return false;
				});
			
				//form表单验证
				layui.form.verify({
					verifyUserName:function(value){
						if(value.length<5){
							return "用户名不能小于五位";
						}
					},
					verifyUserPwd:function(value){
						if(value.length==0){
							return "密码不能为空";
						}
					},
					verifyCode:function(value){
						if(value.length==0){
							return "验证码不能为空";
						}
					}
				});
			

		})();


	</script>
</html>
